<template>
	<view class="lb-g-i round-corner pad l-pad-2">
		<view class="lb-g-i-line" :style="{'background-color': lineColor}"></view>
		<view v-if="activeGame" class="uni-flex uni-column">
			<view class="uni-flex align-center">
				<text class="uni-flex-extend uni-text-big">{{activeGame.gameName}}</text>
				<!-- <text v-if="activeGame.status === 'FINISHED'">{{finishedTime}}</text> -->
			</view>
			<u-line color="#7568EC"></u-line>
			<view class="uni-flex align-center t-mg">
				<image class="lb-g-i-icon r-mg" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_cont_moshi@2x.png" mode="aspectFit"></image>
				<text>模式：{{gameModes[activeGame.mode].label}}</text>
			</view>
			<view class="uni-flex align-center t-mg b-mg">
				<image class="lb-g-i-icon r-mg" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_cont_renshu@2x.png" mode="aspectFit"></image>
				<text>人数：{{activeGame.boyCount + activeGame.girlCount}}/{{activeGame.count}}</text>
				<view class="uni-flex-extend"></view>
				<text v-if="diffVisible" style="color: #F24E67">差：{{differCount}}人</text>
			</view>
			<view class="lb-g-i-b pad uni-flex align-center">
				<view class="uni-flex-extend r-mg">
					<view v-if="activeGame.mode === 'EQUAL'">
						<view class="uni-flex align-center">
							<view>
								<view class="uni-flex align-center">
									<image class="lb-g-i-icon" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_cont_nan@2x.png" mode="aspectFit"></image>
									<text class="r-mg-2">男</text>
									<view class="uni-flex align-center" style="flex-wrap: wrap;">
										<view class="lamp" :class="{'lamp-on-blue': item.on, 'lamp-off': !item.on}" v-for="item in boyLamps" :key="item.id"></view>
									</view>
								</view>
								<view class="uni-flex align-center">
									<image class="lb-g-i-icon" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_cont_nv@2x.png" mode="aspectFit"></image>
									<text class="r-mg-2">女</text>
									<view class="uni-flex align-center" style="flex-wrap: wrap;">
										<view class="lamp" :class="{'lamp-on-red': item.on, 'lamp-off': !item.on}" v-for="item in girlLamps" :key="item.id"></view>
									</view>
								</view>
							</view>
							<view class="l-pad uni-flex-extend">
								<view v-if="aloneLampVisible" class="lamp lamp-off"></view>
							</view>
						</view>
					</view>
					<view v-else class="uni-flex align-center" style="flex-wrap: wrap;">
						<view class="lamp" :class="{'lamp-on-orange': item.on, 'lamp-off': !item.on}" v-for="item in allLamps" :key="item.id"></view>
					</view>
				</view>
				<view v-if="activeGame.noFacility" class="uni-flex align-center">
					<text class="no-facility-tips">无包间或桌位</text>
					<view v-if="activeGame.status === 'MATCHING' && isMine" class="l-mg">
						<view @click="handleTagClick('quit')" class="btn-status" style="background-color: #D61719;">退出</view>
					</view>
				</view>
				<view v-else>
					<view @click="handleTagClick('join')" v-if="activeGame.status === 'WAITING'" class="btn-status" style="background-color: #F4DB21;">补进</view>
					<view @click="handleTagClick('quit')" v-else-if="activeGame.status === 'MATCHING' && isMine" class="btn-status" style="background-color: #D61719;">退出</view>
					<view @click="handleTagClick('join')" v-else-if="activeGame.status === 'MATCHING' && !isMine" class="btn-status" style="background-color: #D61719;">加入</view>
					<view v-else class="btn-status" style="background-color: #4A43BD;color: #fff;">{{gameStatus[activeGame.status].label}}</view>
				</view>
			</view>
		</view>
		<view v-else class="uni-center">无数据</view>
	</view>
</template>

<script>
	import {
		gameModes,
		gameStatus
	} from "../../common/constants.js"
	import utils from "../../common/util.js"
	export default {
		data() {
			return {
				gameModes,
				gameStatus,
				boyLamps: [],
				girlLamps: [],
				allLamps: [],
				aloneLampVisible: false
			};
		},
		props: {
			activeGame: {
				type: Object,
				default: () => {
					return null;
				}
			},
			isMine: {
				type: Boolean,
				default: false
			},
			lineColor: {
				type: String,
				default: "#F4DB21"
			}
		},
		computed: {
			differCount() {
				if (!this.activeGame) {
					return 0;
				}
				return this.activeGame.count - this.activeGame.boyCount - this.activeGame.girlCount;
			},
			diffVisible() {
				if (!this.activeGame) {
					return false;
				}
				let t = this.activeGame.status === 'FINISHED' || this.activeGame.status === 'DISSOLVED' || this.activeGame.status ===
					'RUNNING';
				return this.differCount && !t;
			},
			finishedTime() {
				if (!this.activeGame || !this.activeGame.endTime) {
					return "";
				}
				let d = utils.dateUtils.parse(this.activeGame.endTime);
				let span = new Date().getTime() - d.getTime();
				return utils.dateUtils.humanize(span);
			}
		},
		watch: {
			activeGame(newVal) {
				this.$log("active game changed", newVal);
				this.createLamps();
			}
		},
		created() {
			if (this.activeGame) {
				this.createLamps();
			}
		},
		methods: {
			createLamps() {
				var boyLamps = [];
				var girlLamps = [];
				var evenCount = this.activeGame.count % 2 == 0;
				var halfCount;
				if (evenCount) {
					halfCount = this.activeGame.count / 2;
				} else {
					halfCount = (this.activeGame.count - 1) / 2;
				}
				var boyCount = this.activeGame.boyCount;
				var girlCount = this.activeGame.girlCount;
				for (var i = 0; i < halfCount; i++) {
					boyLamps.push({
						id: "my_boy_" + i,
						on: boyCount > 0
					})
					girlLamps.push({
						id: "my_girl_" + i,
						on: girlCount > 0
					})
					boyCount--;
					girlCount--;
				}
				this.aloneLampVisible = false;
				if (boyCount === 1) {
					boyLamps.push({
						id: "my_boy_" + halfCount,
						on: 1
					})
				} else if (girlCount === 1) {
					girlLamps.push({
						id: "my_girl_" + halfCount,
						on: 1
					})
				} else {
					this.aloneLampVisible = true && !evenCount;
				}
				this.boyLamps = boyLamps;
				this.girlLamps = girlLamps;
				var allLamps = [];
				var currCount = this.activeGame.boyCount + this.activeGame.girlCount;
				for (var i = 0; i < this.activeGame.count; i++) {
					allLamps.push({
						id: "lamp_" + i,
						on: currCount > 0
					})
					currCount--;
				}
				this.allLamps = allLamps;
			},
			handleTagClick(action) {
				this.$emit("action", action);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lb-g-i {
		position: relative;
		color: #FFFFFF;
		background-color: #3B36AE;

		&-b {
			background-color: #302C92;
		}

		&-icon {
			width: 46rpx;
			height: 46rpx;
		}

		&-line {
			position: absolute;
			top: 4rpx;
			left: 0;
			bottom: 4rpx;
			width: 10rpx;
			border-top-left-radius: 100rpx;
			border-bottom-left-radius: 100rpx;
		}
	}

	.lamp {
		width: 30rpx;
		height: 30rpx;
		border-radius: 100%;
		margin: 10rpx 0;
	}

	.lamp:not(:last-child) {
		margin-right: 10rpx;
	}

	.lamp-on-blue {
		background-color: #519EF9;
	}

	.lamp-on-red {
		background-color: #D61719;
	}

	.lamp-on-orange {
		background-color: #FE8816;
	}

	.lamp-off {
		background-color: #FFFFFF;
		opacity: 0.1;
	}
	
	.no-facility-tips {
		color: #F4DB21;
	}
	
	.u-tag {
		 width: 150rpx;
		 text-align: center;
	}
	
	.btn-status {
		width:  150rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 60rpx;
		color: #141735;
	}
</style>
